<template>
  <view class="goods-item" @click="handleClick">
    <image class="goods-img" :src="goods.thumb" mode="aspectFill" lazy-load />
    <view class="info">
      <text class="title">{{ goods.name }}</text>
      <view class="price-line">
        <text class="price">¥{{ goods.price.toFixed(2) }}</text>
        <text class="sales">已售{{ goods.sales }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  goods: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.goods.id)
}
</script>

<style lang="scss" scoped>
	@mixin text-ellipsis($line: 1) {
	  @if $line == 1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  } @else {
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: $line;
	    overflow: hidden;
	  }
	}
.goods-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  
  .goods-img {
    width: 100%;
    height: 320rpx;
    background-color: #f5f5f5;
  }
  
  .info {
    padding: 20rpx;
    
    .title {
      font-size: 26rpx;
      color: #333;
      @include text-ellipsis(2);
      line-height: 1.4;
    }
    
    .price-line {
      margin-top: 15rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .price {
        color: #e4393c;
        font-size: 30rpx;
        font-weight: bold;
      }
      
      .sales {
        color: #999;
        font-size: 24rpx;
      }
    }
  }
}
</style>
